<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  TrendCharts,
  Location,
  Setting,
  HomeFilled,
  Plus
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

import { useRouter } from 'vue-router';
const router = useRouter();

function toCreate(){
    router.push({ name: 'create',params:{ id: 'new' }});
}
import { onMounted, ref } from 'vue'
import { getLastArticleList } from '@/api/article'

const lastArticleList = ref([])

async function getLastArticleListData(){
  const res = await getLastArticleList(1,10)
  lastArticleList.value = res.data
}

onMounted(()=>{
  getLastArticleListData()
})


import ArticeManage from './viewPatr/ArticeManage.vue'
import projectInfo from './viewPatr/projectInfo.vue'
const pageIndex = ref(1)

</script>
 
<template>
  <div class="main-page">
    <div class="main-page-left">
        <div class="main-page-left-top">
            <div class="main-page-left-top-title">博客后台中心</div>
            <div class="main-page-left-top-button"><el-button style="width: 80%;" :icon="Plus" type="primary" size="large" @click="toCreate">创作</el-button></div>
        </div>
        <div class="main-page-left-bottom">
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                style="border-right: 0px;"
            >
                <el-menu-item index="1" @click="pageIndex = 1"> 
                    <template #title>
                        <el-icon><HomeFilled /></el-icon>
                        <span>首页</span>
                    </template>
                </el-menu-item>    
                <el-sub-menu index="2">
                <template #title>
                    <el-icon><Document /></el-icon>
                    <span>管理</span>
                </template>
                    <el-menu-item index="2-1" @click="pageIndex = 2">文章管理</el-menu-item>
                    <el-menu-item index="2-2" @click="pageIndex = 3">作品集管理</el-menu-item>
                    <el-menu-item index="2-3">下载管理</el-menu-item>
                    <el-menu-item index="2-4">评论管理</el-menu-item>
                    <el-menu-item index="2-5">用户管理</el-menu-item>
                    <el-menu-item index="2-6">专栏管理</el-menu-item>
                    <el-menu-item index="2-7">留言管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                <template #title>
                    <el-icon><TrendCharts /></el-icon>
                    <span>数据</span>
                </template>
                    <el-menu-item index="3-1">博客数据</el-menu-item>
                    <el-menu-item index="3-2">下载数据</el-menu-item>
                    <el-menu-item index="3-3">评论数据</el-menu-item>
                    <el-menu-item index="3-4">用户数据</el-menu-item>
                    <el-menu-item index="3-5">留言数据</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
    </div>
    <div class="main-page-right" v-if="pageIndex === 1">
        <!-- 首页 -->
         <div class="main-page-right-home">
            <div class="main-page-right-home-all-data">
                <div class="main-page-right-home-all-data-item">
                    <div class="main-page-right-home-all-data-item-title">总文章数</div>
                    <div class="main-page-right-home-all-data-item-data">100</div>
                    <div class="main-page-right-home-all-data-item-title">昨日无变化</div>
                </div>
                <div class="main-page-right-home-all-data-item">
                    <div class="main-page-right-home-all-data-item-title">总下载数</div>
                    <div class="main-page-right-home-all-data-item-data">100</div>
                    <div class="main-page-right-home-all-data-item-title">昨日无变化</div>
                </div>
                <div class="main-page-right-home-all-data-item">
                    <div class="main-page-right-home-all-data-item-title">总收藏数</div>
                    <div class="main-page-right-home-all-data-item-data">100</div>
                    <div class="main-page-right-home-all-data-item-title">昨日无变化</div>
                </div>
                <div class="main-page-right-home-all-data-item">
                    <div class="main-page-right-home-all-data-item-title">总点赞数</div>
                    <div class="main-page-right-home-all-data-item-data">100</div>
                    <div class="main-page-right-home-all-data-item-title">昨日无变化</div>
                </div>
            </div>
            <div class="main-page-right-home-article-data">
                <div class="main-page-right-home-article-data-select">
                    <div class="main-page-right-home-article-data-select-item">近期文章</div>
                    <div class="main-page-right-home-article-data-select-item">近期资源</div>
                    <div class="main-page-right-home-article-data-select-item">查看全部</div>
                </div>
                <div class="main-page-right-home-article-data-table-header">
                    <div class="main-page-right-home-article-data-table-header-item">标题</div>
                    <div class="main-page-right-home-article-data-table-header-item">阅读</div>
                    <div class="main-page-right-home-article-data-table-header-item">评论</div>
                    <div class="main-page-right-home-article-data-table-header-item">点赞</div>
                    <div class="main-page-right-home-article-data-table-header-item">收藏</div>
                </div>
                <div class="main-page-right-home-article-data-table-body" v-for="item in lastArticleList" @click="router.push({ name: 'article', params: { id: item.id } });">
                    <div class="main-page-right-home-article-data-table-header-item">{{item.title}}</div>
                    <div class="main-page-right-home-article-data-table-header-item">{{item.viewCount}}</div>
                    <div class="main-page-right-home-article-data-table-header-item">{{item.commentCount}}</div>
                    <div class="main-page-right-home-article-data-table-header-item">{{item.likeCount}}</div>
                    <div class="main-page-right-home-article-data-table-header-item">0</div>
                </div>
                <div class="main-page-right-home-article-data-table-body-select">查看全部 > </div>
            </div>
        </div>
    </div>
    <div class="main-page-right" v-if="pageIndex === 2">
        <ArticeManage/>
    </div>
    <div class="main-page-right" v-if="pageIndex === 3">
        <projectInfo/>
    </div>
  </div>
</template>
 
<style scoped>
    .main-page{
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: row;
    }
    .main-page-left{
        width:14vw;
        height: 100%;
    }
    .main-page-left-top{
        height: 12vh;
    }
    .main-page-left-bottom{
        height: 88vh;
    }
    .main-page-left-top-title{
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        height:6vh;
        line-height: 6vh;
    }
    .main-page-left-top-button{
        text-align: center;
        height: 6vh;
        
    }
    .main-page-right{
        flex: 1;
        height: 100%;
    }
    .main-page-right-home{
        width: 86vw;
    }
    .main-page-right-home-all-data{
        width: 90%;
        height: 16vh;
        margin: 3vh 5%;
        border: 1px solid rgb(171, 171, 171);
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .main-page-right-home-all-data-item{
        width: 20%;
        text-align: left;
        margin: 2vh;
        height: 12vh;
        border-right: 1px solid rgb(171, 171, 171);
    }
    .main-page-right-home-all-data-item:nth-child(4){
        border-right: none;
    }
    .main-page-right-home-all-data-item-title{
        font-size: 1.5vh;
        height: 3vh;
        line-height: 3vh;
        color: rgb(171, 171, 171);
    }
    .main-page-right-home-all-data-item-data{
        font-size: 3vh;
        line-height: 6vh;
        height: 6vh;
        font-weight: 600;
    }
    .main-page-right-home-article-data{
        min-height: 8vh;
        width: 90%;
        margin: 3vh 5%;
        border: 1px solid rgb(171, 171, 171);
        border-radius: 10px;
    }
    .main-page-right-home-article-data-select{
        height: 6vh;
        margin: 1vh;
        display: flex;
        flex-direction: row;
    }
    .main-page-right-home-article-data-select-item{
        width: 8%;
        text-align: center;
        line-height: 6vh;
        color: rgb(171, 171, 171);
        cursor: pointer;
    }
    .main-page-right-home-article-data-select-item:hover{
        color: rgb(0, 0, 0);
        font-weight: 600;
    }
    .main-page-right-home-article-data-select-item:nth-child(3){
        margin-left: 76%;
    }
    .main-page-right-home-article-data-table-header{
        height: 4vh;
        display: flex;
        flex-direction: row;
        line-height: 4vh;
        background-color: rgb(241, 241, 241);
        color: rgb(105, 105, 105);
    }
    .main-page-right-home-article-data-table-header-item{
        width: 4%;
        text-align: center;
        padding: 0vh 1vw;
    }
    .main-page-right-home-article-data-table-header-item:nth-child(1){
        text-align: left;
        width: 72%;
    }
    .main-page-right-home-article-data-table-body{
        height: 4vh;
        display: flex;
        flex-direction: row;
        line-height: 4vh;
        color: rgb(0, 0, 0);
    }
    .main-page-right-home-article-data-table-body>.main-page-right-home-article-data-table-header-item:nth-child(1){
        cursor: pointer;
    }
    .main-page-right-home-article-data-table-body>.main-page-right-home-article-data-table-header-item:nth-child(1):hover{
        color: #409eff;
    }
    .main-page-right-home-article-data-table-body-select{
        height: 4vh;
        line-height: 4vh;
        text-align: center;
        margin: 0vh 1vw;
        color: rgb(171, 171, 171);
        border-top: 1px solid rgb(171, 171, 171);
        cursor: pointer;
    }
    .main-page-right-home-article-data-table-body-select:hover{
        color: rgb(0, 0, 0);
        font-weight: 600;
    }
</style>